<div class="search-container">
  <form action="." id="searchForm" ng-class="{ 'hidden-xs': browse.isDedicatedSearchView !== true && this.browse.isVolumio3Theme(), 'pull-right': true }" ng-submit="browse.searchSubmit($event)">
    <input
      type="search"
      ng-model="browse.searchField"
      ng-change="browse.search()"
      class="form-control"
      placeholder="{{'COMMON.SEARCH' | translate}} ..."
      title="{{'COMMON.SEARCH' | translate}}"
      id="search-input-form"
    />
  </form>
  <button class="search-icon" ng-class="{ 'hidden-xs': browse.isDedicatedSearchView !== true }">
    <i ng-if="!browse.searchField.length" class="fa fa-search"></i>
    <i ng-if="browse.searchField.length"
       ng-mousedown="browse.searchField=''; browse.search();"
       class="fa fa-times-circle clear-search"></i>
  </button>
</div>
<div class="clearfix"></div>
<!-- <div id="browseFilterBar">
  Filter by: <a href
      ng-click="browse.browseService.filterBy('track')"
      ng-class="{'active': browse.browseService.filterBy === 'track'}">
    <i class="fa fa-music" aria-hidden="true"></i> Track
  </a> |
  <a href
      ng-click="browse.browseService.filterBy('artist')"
      ng-class="{'active': browse.browseService.filterBy === 'artist'}">
    <i class="fa fa-user" aria-hidden="true"></i> Artist
  </a> |
  <a href
      ng-click="browse.browseService.filterBy('album')"
      ng-class="{'active': browse.browseService.filterBy === 'album'}">
    <i class="fa fa-dot-circle-o" aria-hidden="true"></i> Album
  </a>
</div> -->
